<template>
  <div class="user-container">
    <div class="header">
      <el-button type="primary" @click="addcategory(2)">新增套餐分类</el-button>
      <el-button type="primary" @click="addcategory(1)">新增菜品分类</el-button>
    </div>
    <el-table :data="cateList" border>
      <el-table-column prop="name" label="分类名称" />
      <el-table-column prop="type" label="分类类型" />
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="edit(row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="delCate(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :page-size="page.pageSize"
      layout="prev, pager, next"
      :total="page.total"
      @current-change="changePage"
    />

    <!-- 添加分类 -->
    <el-dialog v-model="addDialogShow" title="新增分类" width="50%">
      <AddCate :categoryType="categoryType" @closeAddDia="addDialogShow = false" />
    </el-dialog>

     <!--编辑分类 -->
     <el-dialog v-model="editDialogShow" title="修改分类" width="50%">
      <EditCate ref='editRef' @editSuccess="editSuccess" />
    </el-dialog>
  </div>
</template>

<script setup>
import { addCateApi, selectCateApi } from '@/api/category.js'
import { ref, reactive, onMounted, nextTick } from 'vue'
// import { employeeStore } from '@/stores/index.js'
import { ElMessage } from 'element-plus'
import AddCate from './addCate.vue'
import EditCate from './editCate.vue'
// const store = employeeStore()
onMounted(async () => {
  getCateList()
})

// const editDialogShow = ref(false)
//员工list
const cateList = ref([])
//分页参数
const page = reactive({
  page: 1,
  pageSize: 5,
  total: 0
})
//获取菜品分类列表
const getCateList = async () => {
  const res = await selectCateApi(page)
  cateList.value = res.data.list
  page.total = res.data.total
}
// //分页查询
const changePage = (val) => {
  page.page = val
  getCateList()
}

//菜品类型
const categoryType = ref(null)
//新增菜单弹层显示
const addDialogShow = ref(false)
//新增分类
const addcategory = async(type) => {
  categoryType.value = type
  addDialogShow.value = true
}

//编辑菜单弹层显示
const editDialogShow = ref(false)
const editRef = ref(null)
const edit = async id => {
  editDialogShow.value = true
  nextTick(() => {
  //  console.log(editRef.value);
  //  debugger
    editRef.value.getCateDetail(id)
    
  })
}

const editSuccess = () => {
  editDialogShow.value = false
  getCateList()
}
</script>
